<template>
<el-dialog title="输入病案号" :visible.sync="visible" width="400px" :close-on-click-modal="false" :close-on-press-escape="false">
  <div class="wt-patient-id-input">
		<wt-autocomplete
			ref="input"
			v-model="currentValue"
			:allow-add="false"
			:query="query"
			:trigger-on-focus="false"
			@input="handleInput"
			@select="handleSelect"
			:auto-select="true"
			:custom-option-component="customItemComponent"
		></wt-autocomplete>
		<span v-if="showMessage">{{message}}</span>
	</div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="ensure" :loading="loading">确 定</el-button>
  </div>
</el-dialog>
	
</template>
<script>
/**
 *
 * 判断输入的id是否存在，如果存在，则isExit为true，否者为false
 *
 */
import AutoComplete from "winged/components/wt-autocomplete";
import Vue from "vue";
export default {
	name: "check-patient-exist",
	props: {
		value: String,
		disabled: {
			type: Boolean,
			default: false
		},
		visible: {
			type: Boolean,
			default: false
		},
		showMessage: {
			type: Boolean,
			default: false
		}
	},
	components: {
		[AutoComplete.name]: AutoComplete
		// [this.customItemComponent]: {
		// 	functional: true,
		// 	render: function(h, ctx) {
		// 		var item = ctx.props.item;
		// 		var data = item.data;
		// 		let value = item.value + " - " + data.patientName;

		// 		let display = [h("div", { attrs: { class: "name" } }, [value])];
		// 		return h("li", ctx.data, display);
		// 	},
		// 	props: {
		// 		item: { type: Object, required: true }
		// 	}
		// }
	},
	data() {
		return {
			currentValue: this.value,
			customItemComponent: "wt-patient-item",
			query: {
				url: "/uaa/api/users/role-info-list",
				value: "id",
				filterParams: "patientInfo.clinicNumber",
				pagination: true
			},
			// 当前提示信息，理想状态应该由本组件来展示查询信息，而不是patient-form组件
			message: "",
			loading: false,
			isExit: false //patientId是否存在
		};
	},
	watch: {
		value(val, oldValue) {
			this.setCurrentValue(val);
		}
	},
	methods: {
		cancel() {
			this.$emit("update:visible", false);
		},
		ensure() {
			this.loading = true;
			this.$emit("update:visible", false);
			console.log("isExit", this.isExit);
			this.$emit("on-ensure", this.isExit, this.currentValue);
		},
		itemInfoDisplay(item) {
			return item.patientName;
		},
		setCurrentValue(value) {
			if (value === this.currentValue) return;
			this.currentValue = value;
		},
		handleInput(val) {
			this.isExit = false;
			this.$emit("input", val);

			// 刷新查询状态的功能目前还未调通，因为span的message会出现换行现象还未解决。
			/*
				let _this = this;
				Vue.nextTick(() => {
					_this.checkLoadingStatus();
				});*/
		},
		handleSelect(data) {
			this.isExit = true;
			console.log("data", data);
			this.currentValue = data;
		},
		// 检查患者信息的查询状态并且显示对应信息。
		checkLoadingStatus() {
			// 刷新查询状态的功能目前还未调通，因为span的message会出现换行现象还未解决。
			/* 
				if (this.$refs.input.isLoading) {
					this.message = `正在查询病案号'${this.currentValue}'的患者信息`;
				}
				else {

				}*/
		}
	},
	created() {
		Vue.component(this.customItemComponent, {
			functional: true,
			render: function(h, ctx) {
				var item = ctx.props.item;
				var data = item.data;
				let value = item.value + " - " + data.patientName;
				let display = [h("div", { attrs: { class: "name" } }, [value])];
				return h("li", ctx.data, display);
			},
			props: {
				item: { type: Object, required: true }
			}
		});
	}
};
</script>